<template>
  <div ref="chart" :style="style"></div>
</template>

<script setup>
import { ref, reactive, onMounted, defineProps, computed } from "vue";
import * as echarts from "echarts";
const { width, height, option } = defineProps({
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "100%",
  },
  option: {
    type: Object,
    // ES6 中的箭头函数语法来简化书写。具体地说，我们可以使用箭头函数的简写方式 () => () 来设置默认函数的返回值为一个空对象。
    default: () => ({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      legend: {
        data: ["销量"],
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      grid: {
        containLabel: true,
        left: "2%",
        right: "2%",
        // bottom: "12%",
      },
      series: [
        {
          name: "销量",
          type: "bar",
          data: [10, 20, 30, 20, 13, 22],
        },
      ],
    }),
  },
});
const chart = ref();
// const option = reactive();
const style = computed(() => ({
  width,
  height,
}));

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  console.log(width, height);
  const myChart = echarts.init(chart.value);
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
});
</script>

<style>
</style>